How do you create and use a Svelte component?

In Svelte, a component is a reusable building block that contains HTML, CSS, and JavaScript in a single .svelte file. Components help you organize your code and create modular, maintainable applications.

To create a component, simply make a new .svelte file. Each file represents a single component.

Example: Button.svelte

This component accepts a label prop and shows a styled button. The export keyword makes the label available to parent components.

You can now use the Button component in another Svelte file by importing it and placing it in the markup.

Example: App.svelte

Here, the Button component is imported and used multiple times with different label props. Svelte automatically renders each instance independently.

Props are used to pass data from a parent to a child component, similar to how attributes work in HTML.

Parent to Child Example

A `.svelte` file usually includes:

<script> — Contains logic, variables, and exported props.
<style> — Contains CSS scoped to this component.
HTML markup — The structure of the component.

By combining these three parts, Svelte allows you to build highly reusable, encapsulated UI pieces.

Question Loading...